<template>
	<view class="page" :class="getThemeClass">
		<unavbar :isback="false" title="AI创作大赛" class="my-nav-ber-a-box mallunavbar"></unavbar>
		<image src="http://cdn.haoyiai.com.cn/images/user_bg.jpg" style="height:230rpx" mode="aspectFill" class="rili-top"></image>
		<!-- <view class="rili-gap"></view> -->
		<view class="rili-content black-bg">
			<view class="flex justify-between align-center w100">
				<view class="flex10 align-center w100">
					<!-- <image :src="info.banner_list[0]" mode="aspectFill" class="rili-avatar"></image> -->
					<view class="u-m-b-10 u-font-24">创作主题：{{info.name}}</view>
					<view class="u-m-l-0 u-font-24">原创作品，作品内容必须有龙湾区域辦识度元素</view>
				</view>
				<!-- <view class="">
					<u-button type="primary" size="mini" shape="circle">关注</u-button>
				</view> -->
			</view>
			<view class="flex justify-between align-center">
				<view class="u-m-l-0 u-font-24">活动时间：{{info.start_time}}</view>
				<view class="btn0" @click="ljtg">立即投稿</view>
			</view>
			<view class="flex justify-between1 align-center u-m-t-50">
				<view @click="tab(1)" class="u-m-l-0 u-font-24 btn1" :class="active == 1 ? 'active' : '' ">参赛作品</view>
				<view @click="tab(2)"  class="btn1" :class="active == 2 ? 'active' : '' ">活动介绍</view>
				<view @click="tab(3)"  class="btn1" :class="active == 3 ? 'active' : '' ">获奖公示</view>
				<view @click="tab(4)"  class="btn1" :class="active == 4 ? 'active' : '' ">获奖作品</view>
			</view>
			<view class="one flex  justify-between align-center u-m-t-48" v-if="active == 1">
				<view v-for="(item,index) in dataOne" :key="index" class="item" @click="detail(item)">
					<image mode="widthFix" :src="item.opus_img"></image>
						<view>{{item.opus_name || '暂无'}}</view>
						<view @click="tp(item.id) && item.is_support == 0">{{item.is_support == 0 ? '投票' :'已投票'}}{{item.vote_num}}</view>
				</view>
			</view>
			 <!-- <view class="rili-line line"></view> -->
			<!-- <view class="">
				<text class="rili-tag text-default u-font-22 text-bold" v-if="info.has_goods==1">实物</text>
				<text class="u-m-l-20 u-font-40 text-bold">{{info.title}}</text>
			</view> -->
			<view class="u-m-t-30 u-font-24 text-content" v-if="active == 2" v-html="info.introduce"></view>
			<view class="u-m-t-30 u-font-24 text-content" v-if="active == 3" v-html="endingList"></view>
			<view class="u-m-t-30 u-font-24 text-content" v-if="active == 4" >
				<view v-for="(item,index) in rankingList" :key="index" class="item" >
					<view class="ranking-list">
						<view class="flex justify-between align-center">
							<view>
								<image :src="iconList[item.ranking-1][0]" style="width: 56rpx;height:94rpx;"></image>
								<image :src="iconList[item.ranking-1][1]" style="margin-left: 20rpx;margin-bottom: 10rpx; width: 118rpx; height: 38rpx;"></image>
							</view>
							<view class="ranking-list-vote">
								<text class="vote-t">投票数量</text><text :style="'color:'+iconList[item.ranking-1][2]">{{item.vote_num}}</text>
							</view>
						</view>
						
						<view class="ranking-list-img">
							<image mode="widthFix" :src="item.opus_img" style="width: 100%; border-radius: 20rpx;"></image>
						</view>
						
						<view class="ranking-list-name">{{item.opus_name || '暂无'}}</view>
						
						<view class="flex justify-between align-center ranking-list-author">
							<view class="flex justify-between align-center">
								<image :src="item.opus_author_avatar" style="width: 70rpx; height:70rpx;border-radius: 50%;margin-left: 20rpx;"></image>
								<text>{{item.opus_author}}</text>
							</view>
							<view class="ranking-list-guanzhu">
								<text>关注</text>
							</view>
						</view>
						<view class="ranking-list-describe"><text style="color: #ffffff; font-weight: 600;">画面描述：</text><text>{{item.describe || '暂无'}}</text></view>
					
						<view class="ranking-list-desc" @click="detail(item)"><text>查看作品详情</text></view>
					</view>
					
				</view>
			</view>
		<!--	<view class="u-m-t-30 flex justify-between align-center">
				<view class="card-bg rili-card flex flex-direction justify-center">
					<view class="u-font-22 text-tips">价格</view>
					<view class="u-m-t-10 u-font-30 text-bold">{{info.price}}</view>
				</view>
				<view class="card-bg rili-card flex flex-direction justify-center">
					<view class="u-font-22 text-tips">发行总量</view>
					<view class="u-m-t-10 u-font-30 text-bold">{{info.num}}</view>
				</view>
			</view>
			<view class="u-m-t-30 flex justify-between align-center">
				<view class="card-bg rili-card flex flex-direction justify-center">
					<view class="u-font-22 text-tips u-m-b-20">是否可转售</view>
					<u-icon name="checkbox-mark" size="30" color="#19be6b" v-if="info.sale_status==1"></u-icon>
					<u-icon name="close" size="30" color="#fa3534" v-else></u-icon>
				</view>
				<view class="card-bg rili-card flex flex-direction justify-center">
					<view class="u-font-22 text-tips u-m-b-20">是否可转赠</view>
					<u-icon name="checkbox-mark" size="30" color="#19be6b" v-if="info.transfer_status==1"></u-icon>
					<u-icon name="close" size="30" color="#fa3534" v-else></u-icon>
				</view>
			</view>
			<view class="main-card u-m-t-30 flex justify-between align-center">
				<view class="text-tips u-font-24">发售时间：</view>
				<view class="u-font-30 text-bold">{{info.show_at}}</view>
			</view>
			<view class="main-card u-m-t-30">
				<view class="u-font-32 text-bold">认证信息</view>
				<view class="flex justify-between align-center u-m-t-54 u-font-26">
					<view class="text-tips">智能合约地址</view>
					<view class="flex align-center" @click="copy($myAppConfig.NFTAddress)">
						<view class="line-1 text-right u-m-r-10" style="width: 300rpx;">{{ $myAppConfig.NFTAddress }}</view>
						<u-icon name="order"></u-icon>
					</view>
				</view>
				<view class="flex justify-between align-center u-m-t-68 u-font-26">
					<view class="text-tips">NFT认证协议</view>
					<view class="line-1 text-right" style="width: 300rpx;">{{ $myAppConfig.NFTAgreement }}</view>
				</view>
				<view class="flex justify-between align-center u-m-t-68 u-font-26">
					<view class="text-tips">区块链网络</view>
					<view>{{ $myAppConfig.NFTNetwork }}</view>
				</view>
			</view>
			<view class="u-font-36 text-bold u-m-t-60">藏品详情</view>
			<view class="main-card u-m-t-40">
				<u-parse :html="info.desc" @imgtap="e => e.ignore()"></u-parse>
			</view>
			<view class="u-font-36 text-bold u-m-t-60">购买须知</view>
			<view class="main-card u-m-t-40">{{note.buy_note||''}}</view>
			<view class="u-font-36 text-bold u-m-t-60">权益须知</view>
			<view class="main-card u-m-t-40">{{note.power_note||''}}</view> -->
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				active:1,
				id:'',
				info:{},
				note:{},
				limist:10,
				page :1,
				dataOne:[],
				endingList:'',
				rankingList:[],
				iconList:[
					['/static/images/r1.png','/static/images/r11.png','#c2ab5c'],
					['/static/images/r2.png','/static/images/r12.png','#a3a9ac'],
					['/static/images/r3.png','/static/images/r13.png','#afa495'],
					['/static/images/r3.png','/static/images/r13.png','#afa495'],
					['/static/images/r3.png','/static/images/r13.png','#afa495'],
					['/static/images/r3.png','/static/images/r13.png','#afa495'],
					['/static/images/r3.png','/static/images/r13.png','#afa495'],
					['/static/images/r3.png','/static/images/r13.png','#afa495'],
					['/static/images/r3.png','/static/images/r13.png','#afa495'],
					['/static/images/r3.png','/static/images/r13.png','#afa495'],
				]
			}
		},
		onLoad(data) {
			this.id = data.id||''
			this.loadData()
			this.getOne()
			this.getRankingList()
			this.getEndingList()
		},
		onReachBottom() {
			if(this.active == 1){
				this.page ++
				this.getOne(false, false)
			}
			
		},
		methods:{
			detail(item){ 
				uni.navigateTo({
					url: '/pages/my/calendar/calendar-detail-detail?id=' + item.id
				})
			},
			ljtg(item){ 
				uni.navigateTo({
					url: '/pages/my/calendar/contribute?id=' + this.id
				})
			},
			tp(id){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要投票吗？',
					success: data => {
						if (data.confirm) {
							that.$u.api.indexactivitysupport({id : id,}).then(res => {
							if(res.code == 200){
								uni.showToast({
									title:"投票成功",
									icon:"none"
								})
								
							}
							that.getOne()
								// this.init()
								// this.$emit('restart')
							})
						}
					}
				});
				// this.$u.api.indexactivitysupport({
				// // this.$u.api.calendars_detail({
				// 	id : id,
				// }).then(res=>{
				// 	//this.dataOne = [...this.dataOne,...res.data.data]
				// })
			},
			getOne(){
				this.$u.api.indexactivitylist({
				// this.$u.api.calendars_detail({
					activityid: this.id,
					limist: this.limist,
					page: this.page,
				}).then(res=>{
					this.dataOne = [...this.dataOne,...res.data.data]
					//this.info = res.data
					// this.note = res.data.note
				})
			},
			getTwo(){
				this.$u.api.indexactivitylist({
				// this.$u.api.calendars_detail({
					activityid: this.id,
					limist: this.limist,
					page: this.page,
				}).then(res=>{
					this.dataOne = res.data.data
					//this.info = res.data
					// this.note = res.data.note
				})
			},
			tab(num){
				this.active = num
				// if(this.active == 1){
				// 	this.getOne()
				// }
				// if(this.active == 2){
				// 	this.getTwo()
				// }
			},
			loadData(){
				this.$u.api.indexactivitydetail({
				// this.$u.api.calendars_detail({
					activityid: this.id
				}).then(res=>{
			 
					this.info = res.data
					// this.note = res.data.note
				})
			},
			getEndingList(){
				this.$u.api.endinglist({
					activityid: this.id
				}).then(res=>{
					this.endingList = res.data.ending
					//this.info = res.data
					// this.note = res.data.note
				})
			},
			getRankingList(){
				this.$u.api.rankinglist({
					activityid: this.id
				}).then(res=>{
					this.rankingList = [...this.rankingList,...res.data]
					//this.info = res.data
					// this.note = res.data.note
				})
			},
			copy(data){
				uni.setClipboardData({
					data
				})
			}
		}
	}
</script>

<style lang="scss">
.one .item{
	background: #262626;
	border-radius: 20rpx;
	overflow: hidden;
	width: 48%;
}
.one .item image{width: 100%;}
.one .item view:nth-child(2){
	font-size: 28rpx;
	font-family: PingFang SC-Bold, PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 33rpx;
	padding-left: 18rpx;
	padding-top: 18rpx;
	font-weight: normal;
}
.one .item view:nth-child(3){
	border-radius: 25rpx;
	border: 1px solid #CAFD5C;
	font-size: 24rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #CAFD5C;
	line-height: 28rpx;
	margin-top: 26rpx;
	text-align: center;
	height: 50rpx;
	line-height: 50rpx;
 
	margin-bottom: 24rpx;
	width: 92%;
	margin-left: auto;
	margin-right: auto;
}
.btn1{
	background: #262626;
	color: #fff;
	font-size: 24rpx;
	padding: 5px 8px;
	border-radius: 35rpx;
	margin-right: 24rpx;
	border: 1px solid #262626;
}
.btn1.active{
	border: 1px solid #CAFD5C;
	color: #fff;
}
.btn0{
	background: #cafd5c;
	color: #fff;
	border-radius: 25rpx;
	font-size: 24rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 28rpx;
	padding: 5px 8px;
}
.flex10{
	border-bottom: 1px solid rgba(255,255,255,.2);
	padding-bottom: 24rpx;
	margin-bottom: 32rpx;
	}
	.rili-top{
		width: 686rpx;
		//height: 100vw;
	//	//position: absolute;
	//	top: 0;
	//	left: 0;
	margin-left: auto;
	margin-right: auto;
	display: block;
	border-radius: 20rpx;
	}
	.rili-gap{
		width: 100vw;
		height: 686rpx;
	}
	.rili-content{
		position: relative;
		z-index: 10;
		padding:30rpx 32rpx 20rpx 32rpx;
		border-radius: 66rpx;
		.rili-avatar{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
		.rili-line{
			height: 1rpx;
			margin: 40rpx 0 50rpx 0;
		}
		.rili-tag{
			display: inline-block;
			height: 40rpx;
			line-height: 40rpx;
			padding: 0 16rpx;
			background: linear-gradient(90deg, #04D5A3 0%, #00E2E2 100%);
			border-radius: 20rpx 8rpx 20rpx 8rpx;
		}
		.rili-card{
			width: 308rpx;
			height: 132rpx;
			border-radius: 20rpx;
			padding-left: 40rpx;
		}
	}
	.ranking-list{
		background-color: #212121;
		border: 4rpx solid rgba(255,255,255,.2);
		border-radius: 20rpx;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
		.ranking-list-vote{
			margin-top: 40rpx;
			.vote-t{
				color: #fff;
				margin-right: 20rpx;
			}
			.vote-n {
				
			}
		}
		.ranking-list-author {
			color: #ffffff;
		}
		.ranking-list-img{
			margin-top: 30rpx;
		}
		.ranking-list-name {
			padding: 30rpx 0;
			color: #ffffff;
			font-weight: 600;
		}
		.ranking-list-guanzhu{
			padding: 10rpx 40rpx;
			align-items: center;
			border: 2rpx solid rgba(255,255,255,.2);
			background-color: #000000;
			border-radius: 40rpx;
			color: #ffffff;
		}
		.ranking-list-describe{
			margin: 30rpx 0;
		}
		.ranking-list-desc {
			font-family: PingFang SC-Medium, PingFang SC;
			text-align: center;
			background-color: #434d2c;
			color: #cafd5c;
			font-size: 28rpx;
			font-weight: 600;
			padding: 20rpx 0;
			margin-bottom: 30rpx;
		}
	}
</style>